<template>
    <div class='flink-bg'>
        <div class="flink-inner w">
            <ul>
                <li class="flink-nav" v-for="(nav, index) in navList" :key="index" >{{nav.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navList: [
                { name: "网页设计" },
                { name: "小程序" },
                { name: "APP设计" },
                { name: "VI设计" }
            ]
        };
    }
};
</script>

<style lang='css' scoped>
.flink-bg {
    height: 70px;
    background-color: #373d49;
}
.flink-bg .flink-inner {
    display: flex;
    justify-content: flex-start;
    height: 100%;
}
.flink-inner ul {
    padding: 20px 0px;
}
.flink-inner .flink-nav {
    float: left;
    border-right: 2px solid #6e7788;
    padding: 0px 5px;
    height: 16px;
    line-height: 14px;
    color: #6e7788;
}
.flink-inner .flink-nav:hover{
    cursor: pointer;
    color: #cfd5e0;
}
.flink-inner li:first-child {
    padding-left: 0px;
}
.flink-inner li:last-child {
    border: none;
}
</style>